<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSV文件读取器</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css">
    <!-- Element UI styles -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- Quill styles -->
    <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
    <!-- Vue and Element UI scripts -->
    <script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!-- Quill script -->
    <script src="https://cdn.quilljs.com/1.3.6/quill.min.js"></script>
</head>
<body class="bg-gray-100 p-8">
    <div class="flex container mx-auto">
        <div id="slide" class="w-1/4 bg-white p-6 rounded shadow overflow-y-auto h-[90vh] scrollbar-thin scrollbar-thumb-gray-300 scrollbar-track-gray-100">
            <input type="file" id="csvFileInput" class="mb-4 border border-gray-300 rounded p-2 w-full" accept=".csv">
            <button id="readCsvButton" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">读取CSV文件</button>
            <h2 class="text-xl font-semibold mt-6 mb-4">CSV文件内容（第3列）</h2>
            <div id="csvContent" class="space-y-2 overflow-y-auto scrollbar-thin scrollbar-thumb-gray-300 scrollbar-track-gray-100" style="height: calc(90vh - 250px);"></div>
            <div id="pagination">
              <el-pagination
                background
                layout="prev, pager, next"
                :page-size="itemsPerPage"
                :total="totalCount"
                @current-change="handlePageChange"
              ></el-pagination>
            </div>
        </div>
        <div id="container" class="w-3/4 bg-white p-6 rounded shadow ml-4 overflow-y-auto h-[90vh] scrollbar-thin scrollbar-thumb-gray-300 scrollbar-track-gray-100">
            <h2 class="text-xl font-semibold mb-4">详细内容</h2>
            <div id="detailContent" class="border rounded p-4">请选择左侧的行以查看详细信息</div>
        </div>
    </div>

    <script>
        // 获取DOM元素
        const csvFileInput = document.getElementById('csvFileInput');
        const readCsvButton = document.getElementById('readCsvButton');
        const csvContent = document.getElementById('csvContent');
        const detailContent = document.getElementById('detailContent');
        // 初始化Vue实例
        const app = new Vue({
          el: '#pagination',
          data: {
            itemsPerPage: 50,
            totalCount: 0,
            currentPage: 1
          },
          methods: {
            async handlePageChange(page) {
              this.currentPage = page;
              await loadData(page);
            }
          }
        });

        let allLines = [];

        // 加载数据
        function loadData(page = 1) {
            const start = (page - 1) * app.itemsPerPage;
            const end = Math.min(start + app.itemsPerPage, allLines.length);
            csvContent.innerHTML = '';
            app.totalCount = allLines.length;
            
            for (let i = start; i < end; i++) {
                const line = allLines[i];
                const columns = line.split(',');
                if (columns.length > 0) {
                    const button = document.createElement('button');
                    button.textContent = i + 1 + '. ' + columns[2];
                    button.className = 'w-full bg-white hover:bg-gray-100 text-gray-800 font-semibold py-2 px-4 border border-gray-400 rounded shadow';
                    csvContent.appendChild(button);
                    button.addEventListener('click', () => {
                        showDetailContent(line);
                    });
                }
            }
        }

        // 显示详细内容
        function showDetailContent(line) {
            const columns = line.split(',');
            detailContent.innerHTML = '';
            const first14Columns = columns.slice(0, 14).join(' | ');
            const column15 = columns[14] || '';
            const contentDiv = document.createElement('div');
            contentDiv.className = 'bg-gray-50 p-4 rounded-lg shadow-inner';
            contentDiv.innerHTML = `
                <div class="mb-6 p-4 bg-white rounded-lg shadow-sm">
                    <h3 class="font-semibold mb-2">前14列内容：</h3>
                    <div class="text-gray-700 whitespace-pre-wrap">${first14Columns}</div>
                </div>
                <div class="p-4 bg-white rounded-lg shadow-sm">
                    <h3 class="font-semibold mb-2">第15列内容：</h3>
                    <div id="quill-editor" class="h-[60vh] overflow-y-auto scrollbar-thin scrollbar-thumb-gray-300 scrollbar-track-gray-100"></div>
                </div>
            `;
            detailContent.appendChild(contentDiv);
            const quill = new Quill('#quill-editor', {
                theme: 'snow',
                readOnly: true,
                modules: {
                    toolbar: false
                }
            });
            const formattedContent = column15.replace('     ', '\n').replace('&#xa0;','\n').replace('。', '。\n').replace('裁定如下：', '裁定如下：\n').replace('生效。', '生效。\n');

            quill.setContents([{ insert: formattedContent }]);
        }

        // 检查是否有上次选择的文件
        const lastFile = localStorage.getItem('lastCsvFile');
        if (lastFile) {
            // 创建一个新的File对象
            const file = new File([], lastFile);
            const dataTransfer = new DataTransfer();
            dataTransfer.items.add(file);
            csvFileInput.files = dataTransfer.files;
        }

        // 读取CSV文件内容
        readCsvButton.addEventListener('click', () => {
            const file = csvFileInput.files[0];
            if (!file) {
                alert('请选择一个CSV文件');
                return;
            }

            const reader = new FileReader();
            reader.onload = function(e) {
                const contents = e.target.result;
                allLines = contents.split('\n');
                csvContent.innerHTML = '';
                detailContent.innerHTML = '请选择左侧的行以查看详细信息';
                loadData(1);
            };
            reader.readAsText(file);
        });

    </script>
</body>
</html>
